<template>
  <view class="container review">
    <view class="stickyClass">
      <v-tabhead @barTap="barTap" :headItems="headItems" :activeIndex="activeIndex"></v-tabhead>
    </view>
    <swiper @change="changeTab" :current="activeIndex" class="swiperContainer">
      <swiper-item v-for="(items, index) in headItems" :key="index">
        <v-item
          @navToDetailPage="navToDetailPage"
          :homeCode="homeCode"
          :currentCode="headItems[activeIndex].code"
          :activeIndex="activeIndex"
          :code="items.code"
        ></v-item>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import VTabhead from "./fragment/vtabhead/index";
import vItem from "./fragment/item/index";

export default {
  components: {
    VTabhead,
    vItem
  },
  data() {
    return {
      divShow: 0,
      examId: "100101",
      headItems: [
        {
          code: "study",
          title: "学习"
        },
        {
          code: "test",
          title: "试题"
        }
      ],
      activeIndex: 0
    };
  },

  watch: {},
  computed: {
    homeCode() {
      if (this.headItems.length == 0) return "";
      return this.headItems[0].code;
    }
  },
  methods: {
    barTap(activeIndex) {
      this.activeIndex = activeIndex;
    },
    changeTab(e) {
      let index = e.target.current;
      this.activeIndex = index;
    },
    navToDetailPage(item) {
      uni.navigateTo({
        url: "/pages/search/searchDetail?id=" + item
      });
      return;
    }
    // dispatchFunc(item) {
    // 	if (item.route != undefined) {
    // 		uni.navigateTo({
    // 			url: item.route
    // 		});
    // 		return;
    // 	}
    // }
  },
  onReady() {}
};
</script>

<style lang="less">
page {
  background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.c_blue {
  color: #377cfd;
}
.container {
  width: 100%;
  height: 100%;
}
.review {
  display: flex;
  flex-direction: column;
}
.swiperContainer {
  width: 100%;
  height: calc(100vh - 30px);
  flex: 1;
  background-color: #fff;
}

.tab_head {
  border-bottom: 1px solid #f1f1f1;
}
.list__content {
  background-color: #fff;
}
</style>
